<template>
  <div class="wrapper">
    <el-row :gutter="40">
      <el-col :span="12" class="left">
        <span class="aboutus">About Us</span>
        <h3 class="title">Best Brand Best Quality</h3>
        <p class="content">
          There are many variations of passages of Lorem Ipsum available,
          but the majority have suffered alteration in some form words.
        </p>
        <p class="content">
          If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text.
          All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
          making this the first true generator on the Inter net. It uses a dictionary of over 200 Latin words.
        </p>
        <el-button type="text" class="more" @click="moreAbout">
          More About Us
          <i class="el-icon-arrow-right"/>
        </el-button>
      </el-col>
      <el-col :span="12" class="right">
        <div class="aboutImg">
          <img class="img1" :src="about1" alt="" draggable="false"/>
          <img class="img2" :src="about2" alt="" draggable="false"/>
          <img class="img3" :src="about3" alt="" draggable="false"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import about1 from '@img/featuerd/about1.jpg'
import about2 from '@img/featuerd/about2.jpg'
import about3 from '@img/featuerd/about3.jpg'

export default {
  name: 'PageAbout',
  data () {
    return {
      about1: about1,
      about2: about2,
      about3: about3
    }
  },
  methods: {
    moreAbout () {
      this.$router.push('/about')
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper{

    text-align: left;

    .left{
      padding: 32px 0;
    }

    .aboutus{
      font-size: 14px;
      margin-bottom: 9px;
      color: #777777;
      font-family: 'Lato', sans-serif;
    }

    .title{
      margin-bottom: 25px;
      font-weight: 700;
      font-size: 24px;
      line-height: 32px;
      font-family: 'Roboto Condensed', sans-serif;
      color: #333333;
      margin-top: 16px;
    }

    .content{
      display: block;
      line-height: 26px;
      margin-bottom: 25px;
      font-weight: 400;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-family: 'Lato', sans-serif;
      font-size: 16px;
      color: #777777;
    }

    .more{
      font-size: 14px;
      font-weight: 700;
      color: #31333e;
      font-family: 'Roboto Condensed', sans-serif;
    }

    .more:hover{color: #31333e;
      color: #ff7353;
    }

    .aboutImg{
      width: 100%;
      position: relative;

      img{
        max-width: 100%;
        height: auto;
        border: 5px solid white;
        transition: 1s;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
        cursor: pointer;
      }

      img:hover{
        z-index: 2;
      }

      .img1{
        position: relative;
      }

      .img2{
        position: absolute;
        top: 70px;
        right: 15px;
      }

      .img3{
        vertical-align: middle;
        transform: translate3d(95px, -30px, 0);
      }

    }

  }

</style>
